<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-slot</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<navbar>
				<template v-slot:left>
					<div>
						<span>&lt;</span>
						<span>返回</span>
					</div>
				</template>
				<template v-slot:middle>
					<div>
						标题
					</div>
				</template>
				<template v-slot:right>
					<div>
						<img width="25px" src="img/search.png" alt="">
					</div>
				</template>
			</navbar>

		</div>
		<script>
			Vue.component("navbar", {
				template: `
		                <div style="display:flex;justify-content: space-around;">
		                    <slot name="left"></slot>
		                    <slot name="middle"></slot>
		                    <slot name="right"></slot>
		                </div>  
		           `
			})
			var vm = new Vue({
				el: "#box",
				data: {}
			})
		</script>
	</body>
</html>
